@charset 'utf-8';

@import 'common';

.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: 0;
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}


.cancel-btn{    
        margin-left:gr(20);
        text-align: center;
        float: left;
        input{
//          width: gr(63);
            height: gr(41);
            background: white;
            font-size: gr(29);
            color: #999999;
            margin-top: gr(26);
            border: none;
            appearance: none;
            -webkit-appearance: none;
        }
}

.title{
    width: gr(184);
    height: gr(41);
    font-size: gr(29);
    font-weight: normal;
    text-align: center;
    margin: gr(29) auto 0;
}


.tel{
    width: gr(578);
    height: gr(83);
    border: gr(1) solid #dfdfdd;
    font-size: 0;
    margin: gr(30) auto 0;
    position: relative;
    background: white;
    span{
        display: inline-block;
        width: gr(136);
        height: gr(83);
        font-size: gr(24);
        color: #666666;
        line-height: gr(80);
        background: white;
        position: absolute;
        left: gr(18);
        top: 0; 
    }
    input{
        width: gr(424);
        height: 100%;
        border: none;
        font-size: gr(24);  
        margin-left: gr(154); 
    }
    input::-webkit-input-placeholder{
        color: #cccccc;
    }
}

.code{
    width: gr(578);
    height: gr(83);
    margin: gr(30) auto 0;
    .code-left{
        width: gr(343);
        height: 100%;
        float: left;  
        border: gr(1) solid #dfdfdd;
        font-size: 0;
        position: relative;
        span{
            display: inline-block;
            width: gr(135);
            height: 100%;
            font-size: gr(26);
            line-height: gr(80);
            background: white;
            line-height: gr(83);
            position: absolute;
            left: gr(18);
            top: 0;
            color: #666666;
        }
        input{
            width: 100%;
            height: 100%;
            border: none;
            font-size: gr(24);
            text-indent: gr(154);
            color: #cccccc;
        }
         input::-webkit-input-placeholder{
            color: #cccccc;
        }
    }
    .code-btn{
        width: gr(202);
        height: 100%;
        float: right;
        border: gr(1) solid #dfdfdd;
        text-align: center;
        line-height: gr(75);
        padding: 0;
        background: white;
        a{
           font-size: gr(26);
           color: #666666;
           display: inline-block;
           width: 100%;
           height: gr(83);
           vertical-align: top;
           line-height: gr(83);
        }
    }
}


.set-password,.sure-password{
    width: gr(578);
    height: gr(83);
    border: gr(1) solid #dfdfdd;
    font-size: 0;
    margin: gr(30) auto 0;
    position: relative;
    span{
        display: inline-block;
        width: gr(136);
        height: gr(83);
        font-size: gr(24);
        color: #666666;
        line-height: gr(80);
        background: white;
        position: absolute;
        left: gr(18);
        top: 0; 
    }
    input{
        width: 100%;
        height: 100%;
        border: none;
        font-size: gr(24);
        
        text-indent: gr(154);     
    }
    input::-webkit-input-placeholder{
        color: #cccccc;
    }
}


.set-password{
    margin: gr(30) auto 0;
}

.sure-password{
    margin: 0 auto;
    border-top: none;
}



.finish-btn{
    width: gr(582);
    height: gr(82);
    margin: gr(36) auto 0;
    input{
        width: 100%;
        height: 100%;
        background: #d62d31;
        font-size: gr(29);
        color: white;
        border-radius: gr(14);
        letter-spacing: gr(7);
    }
}


.popup{
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: none;
    .wrap-1{
        width: gr(249);
        height: gr(183);
        margin-top: gr(242);
        margin-left: gr(196);
        img{
            width: 100%;
        }
    }
    .wrap-2{
        width: gr(28);
        height: gr(28);
        position: absolute;
        right: gr(40);
        top: gr(108);
        img{
            width: 100%;
        }
    }
}


.red-num{
    color: #db494c;
}
